<template>
    <div>
        <span>表册：<a-typography-text type='success'>东风小区</a-typography-text></span>
        <span class='m-l-20'>目前在册水表：<a-typography-text type='success'>30</a-typography-text></span>
    </div>
    <div class='m-t-30'>
        <a-transfer :rowKey="record => record.id" v-model:target-keys='targetKeys' :show-select-all='false' :data-source='dataSource'>
            <template #children='{ direction, filteredItems, selectedKeys, disabled: listDisabled, onItemSelectAll, onItemSelect }'>
                
                <a-table row-key='id' :row-selection="
            getRowSelection({
              disabled: listDisabled,
              selectedKeys,
              onItemSelectAll,
              onItemSelect,
            })
          " :columns='columns' :data-source='filteredItems' 
				/>
            
            </template>
        </a-transfer>
    </div>
</template>

<script lang='ts' setup>
    import { Column } from "@/types";
    import { reactive, ref } from "vue";
    const targetKeys = ref<string[]>([]);

    const columns:Column[] = [
        {title : '户号', dataIndex : 'code'},
        {title : '户名', dataIndex : 'name'},
        {title : '地址', dataIndex : 'address'},
    ]

    const dataSource = reactive([
        {
            id: '1',
			code: '小黄狗',
			name: '一个小黄狗',
            address: '一个小黄狗a',
			disabled: false
        },
        {
            id: '2',
			code: '小黄狗2',
			name: '一个小黄狗2',
            address: '一个小黄狗2a',
			disabled: false
        }
    ])

    const getRowSelection = ({
        disabled,
        selectedKeys,
        onItemSelectAll,
        onItemSelect,
    }: Record < string, any > ) => {
        console.log(selectedKeys)
        return {
            getCheckboxProps: (item: Record < string, string | boolean > ) => ({
                disabled: disabled || item.disabled,
            }),
            onSelectAll(selected: boolean, selectedRows: Record < string, string | boolean > []) {
                const treeSelectedKeys = selectedRows
                    .filter(item => !item.disabled)
                    .map(({
                        key
                    }) => key);
                onItemSelectAll(treeSelectedKeys, selected);
            },
            onSelect({
                key
            }: Record < string, string > , selected: boolean) {
                onItemSelect(key, selected);
            },
            selectedRowKeys: selectedKeys,
        };
    };

</script>
